<template>
    <div>
        <div class='container'>
            <div class='handle-box'>


                用户名：<el-input v-model='query.name' placeholder='用户名' class='handle-input mr10' prefix-icon='el-icon-search'></el-input>

                创建时间：<el-date-picker class='mr10' style='padding: 2px 10px;'
                    v-model='query.date'
                    type='daterange'
                    placeholder='选择日期'
                    format='yyyy 年 MM 月 dd 日'
                    value-format='yyyy-MM-dd'
                    range-separator='至'
                    start-placeholder='开始日期'
                    end-placeholder='结束日期'>
                </el-date-picker>

                事件：<el-select v-model='query.action' placeholder='事件' class='handle-select mr10'>
                    <el-option v-for='s in select' :key='s.key' :label='s.action' :value='s.key'></el-option>
                </el-select>

                <el-button type='primary' icon='el-icon-search' @click='handleSearch'>搜索</el-button>
                <el-button type='primary' icon='el-icon-refresh-left' @click='resetSearch'>重置</el-button>

            </div>

            <el-table
                :data='tableData'
                border
                class='table'
                ref='multipleTable'
                header-cell-class-name='table-header'
                @selection-change='handleSelectionChange'
            >
                <el-table-column type='selection' width='55' align='center'></el-table-column>
                <el-table-column type='index' width='55' label='序号' align='center'></el-table-column>
                <el-table-column prop='action' label='事件'></el-table-column>
                <el-table-column prop='createUserName' label='用户名' align='center'></el-table-column>
                <el-table-column prop='createTime' label='创建日期'></el-table-column>
            </el-table>

            <div class='pagination'>
                <el-pagination
                    background
                    layout='total, prev, pager, next'
                    :current-page='query.pageIndex'
                    :page-size='query.pageSize'
                    :total='pageTotal'
                    @current-change='handlePageChange'
                ></el-pagination>
            </div>
        </div>


    </div>
</template>

<script>
import { fetchData } from '../../api';

export default {
    name: 'loginLogTable',
    data() {
        return {
            query: {
                date: [],
                name: '',
                action: '',//事件
                pageIndex: 1,
                pageSize: 10
            },
            pageTotal: 0,
            select: [],//下拉选择框
            tableData: [],
            multipleSelection: [],//多选值
            //快捷日期
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            }
        };
    },
    //初始化函数
    mounted() {
        this.global.saveFunLog(this.global.FUN_LOG_ENUM.LOGIN_LOG);
        this.getData();
        //初始化下拉选择框
        this.initSelect();
    },
    methods: {
        // 给数据表格赋值
        getData() {
            this.$http.post('/basicserver/logController/selectPageLoginLog.json', this.query).then(res => {
                console.log(res);
                if (res.data.status) {
                    this.tableData = res.data.data.records;//数据
                    this.pageTotal = res.data.data.total;//总数
                } else {
                    this.$message.error(res.data.msg);
                }
            });
        },
        //初始化下路选择框
        initSelect() {
            this.$http.get('/basicserver/logController/initSelect.json').then(res => {
                const data = new Array();
                console.log("select")
                for (const action of res.data.data) {
                    console.log(action)
                    console.log(action['key'])
                    if (action['key'] == '1' || action['key'] == '2') {
                        data.push(action);
                    }
                }
                this.select = data;
            });
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);//重置为首页
            this.getData();//重新请求赋值
        },

        // 触发重置按钮
        resetSearch() {
            this.query.date = [];
            this.query.name = '';
            this.query.action = '';
            this.$set(this.query, 'pageIndex', 1);//重置为首页
            this.getData();//重新请求赋值
        },
        // 分页导航
        handlePageChange(val) {
            console.log(val);
            this.$set(this.query, 'pageIndex', val);
            this.getData();
        },
        // 多选操作
        handleSelectionChange(val) {
            console.log(val);
            this.multipleSelection = val;
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
